<template>
	<view class="book_content">
		<view 
			v-for="(question, index) in wrongBookQuestionList" 
			:key="question.id" class="question_body">
			<view class="question">
				<uParse :content="question.content"/>
			</view>
			
			<view class="question_item"> 
				<radio-group v-if="question.questionType === 1">
					<view class="cu-form-group" >
						<view v-for="item in question.optionList">
							<radio
								:checked="item.studentAnswer === item.label"
								:value="item.label">
							  {{item.label}}.
								<view 
								  v-html="item.option_name" class="title text-black">
								</view>
							</radio>
						</view>
					</view>
				</radio-group>
				
				<checkbox-group
				  v-else-if="question.questionType === 2" 
				  class="block" >
					<view class="cu-form-group" v-for="item in question.optionList">
						<checkbox
							:checked="item.studentAnswer === item.label"
							:value="item.label">
						  {{item.label}}.
							<view 
							  v-html="item.option_name" class="title text-black">
							</view>
						</checkbox>
					</view>
				</checkbox-group>
			</view>
			
			<view class="question_item">
				试题类型：
				<uni-tag
				  :text="question.questionTypeName" 
				  type="error" >
				</uni-tag>
			</view>
			
			<view class="question_item">
				科目：
				<uni-tag
				  :text="question.subjectName" 
				  type="primary" >
				</uni-tag>
			</view>
			
			<view class="question_item">
				状态：
				<uni-tag
				  v-if="question.correctStatus === 0"
				  text="错误" 
				  type="error" >
				</uni-tag>
				
				<uni-tag
				  v-else-if="question.correctStatus === 1"
				  text="正确" 
				  type="primary" >
				</uni-tag>
				
				<uni-tag
				  v-else-if="question.correctStatus === 2"
				  text="待批改" 
				  type="error" >
				</uni-tag>
				
				<uni-tag
				  v-else
				  text="已批改" 
				  type="primary" >
				</uni-tag>
			</view>
			
			<view class="question_item">
				分数：{{question.questionMark}}分
			</view>
			
			<view class="question_item">
				得分：{{question.studentMark}}分
			</view>
			
			<view class="question_item">
				解析：
				<uParse :content="question.analysis"/>
			</view>
			
			<view class="question_item">
				正确答案：
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uParse from '@/components/uParse/src/wxParse.vue'
	export default {
		components: {uniTag, uParse},
		data() {
			return {
				// content: 'fdfdfd辅导辅导',
				pageNumber: 1,
				pageSize: 5,
				wrongBookQuestionList: []
			}
		},
		
		onLoad () {
			this.getWrongBookQuestionList()
		},
		
		methods: {
			getWrongBookQuestionList () {
				let params = {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}
				this.$httpApi.get('/student/wrongBook', params)
				.then(response => {
				  let result = response.data
				  this.wrongBookQuestionList = result.dataList
				  this.parseQuestion(this.wrongBookQuestionList)
				})
			},
			
			parseQuestion(questionDataList) {
				questionDataList.forEach(item => {
					// ++questionIndex
					// item.questionIndex = questionIndex
					if (item.questionType === 1 || item.questionType === 2) {
					  let options = item.options
					  if (options) {
						item.optionList = JSON.parse(options)
					  }
					}
					// 试题类型非单选和判断题， 解析答案数组
					if (item.questionType !== 1 && item.questionType !== 6) {
						let studentAnswerStr = item.studentAnswer
						let studentAnswerArray = []
						if (studentAnswerStr) {
						  studentAnswerStr.split(',').forEach(value => {
							let host = ''
							if (item.questionType !== 2) {
							 // host = this.fileHost
							}
							if (value) {
							  studentAnswerArray.push(host + value)
							}
						  })
						  item.studentAnswer = studentAnswerArray
						}
					}
				})
			}
		}
	}
</script>

<style>
	.question {
		margin-left: 5rpx;
		align-items: center;
		/*实现水平居中*/
		justify-content: left;
		display: flex;
		margin-left: 20rpx;
		min-height: 120rpx;
	}
	
	.book_content {
		background: #FFFFFF;
	}
	.question_body {
		border-bottom: 2px solid #D0D0D0;
	}
	.question_item {
		margin-left: 20rpx;
		line-height: 80rpx;
	}
</style>
